<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>回调测试</title>
<link rel="stylesheet" href="../../src/mobilebone.css">
<link rel="stylesheet" href="../test.css">
<style>
p { font-size: 14px; color: #666; }
.text-shadow { text-shadow: 1px 1px #eee; }
</style>
</head>

<body>
<div id="pageHome" class="page out" data-onpagefirstinto="home" data-animationstart="start" data-animationend="end">
    <h2>主页</h2>
    <ul>
        <li><a href="#page1">页面1</a></li>
        <li><a href="#page2">页面2</a></li>
        <li><a href="#page3">页面3</a></li>
        <li><a href="#page4">页面4 - mergeCallback测试</a></li>
    </ul>
    <ul>
        <li><a href="../index.html" data-ajax="false">&laquo; 返回测试引导首页</a></li>
    </ul>
    <p></p>
</div>
<div id="page1" class="page out" data-callback="callback" data-params="animationstart=start&amp;animationend=end">
    <a href="#pageHome" data-rel="back">&laquo;返回1</a>
    <p></p>
</div>
<div id="page2" class="page out" data-params="root=window&amp;onpagefirstinto=callback_page">
    <a href="#pageHome" data-rel="back">&laquo;返回2</a>
    <p>该页面首次载入，按钮会被居中</p>
</div>
<div id="page3" class="page out" data-root="callback_page.test_obj" data-animationend="random_bgcolor">
    <a href="#pageHome" data-rel="back">&laquo;返回3</a>
    <p class="text-shadow">预期效果为每次动画载入随机灰度背景色</p> 
</div>
<div id="page4" class="page out" data-root="window" data-fallback="fallbackJoin">
    <a href="#pageHome" data-rel="back">&laquo;返回4</a>
    <div><input type="checkbox" id="mergeCallback" checked style="width:16px; height:16px;"><label for="mergeCallback">mergeCallback为true</label></div>
    <p></p> 
</div>

<script src="../../src/mobilebone.js"></script>
<script>
FUN = {
	time: function() {
		var date = new Date();
		return [date.getHours(), date.getMinutes(), date.getSeconds()].join(":");
	},
	status: {
		into: "进入",
		out: "离开"
	},
	callback: function() {
		console.log(this.status.into = "回调执行！this对应的是Fun!");
	},
	home: function(pageInto, pageOut, options) {
		pageInto.querySelector("p").innerHTML += "首次载入时间是：" + this.time() + "<br>";
	},
	start: function(page, into_or_out, options) {
		page.querySelector("p").innerHTML += "页面即将进行"+ this.status[into_or_out] +"动画，时间是：" + this.time() + "<br>";
	},
	end: function(page, into_or_out) {
		page.querySelector("p").innerHTML += "页面"+ this.status[into_or_out] +"动画完成，时间是：" + this.time() + "<br>";
	}
};
// 2014-12-28新增回调合并时候的上下文测试
Mobilebone.callback = function() {
	// 上下文为当前page回调所在的对象，例如本测试页面：
	// 1. 默认为Fun;
	// 2. page2因为root=window, 因此上下文为window
	// 3. 页面3则是 callback_page.test_obj
	// 需要注意的是，如果存在回调合并的情况，其公用同一个上下文this, 值同上规则
	console.log("全局回调上下文this: " + this.time);
	console.log(this);
};

Mobilebone.onpagefirstinto = function(pageinto) {
	console.log("global: onpagefirstinto");
};

Mobilebone.animationstart = function(page) {
	console.log("global: animationstart");
};

window.callback_page = function(page) {
	// 按钮居中
	page.style.textAlign = "center";
};

callback_page.test_obj = {
	random_bgcolor: function(page, into_or_out) {
		if (into_or_out == "into") {
			page.style.backgroundColor = "rgba(0,0,0,."+ Math.round(Math.random() * 10) +")";
		}
	}
};

Mobilebone.rootTransition = FUN;

var flag_fallback = "not";
Mobilebone.fallback = function(pagein, pageout) {
	if (pageout.id == "page4") {
		flag_fallback = "page4";
	} else {
		flag_fallback = "not";
	}
};
var fallbackJoin = function(pagein, pageout) {
	flag_fallback += '-merge';
	pageout.querySelector("p").innerHTML = flag_fallback;
};

document.getElementById("mergeCallback").onclick = function() {
	Mobilebone.mergeCallback = Boolean(this.checked);
};
</script>
</body>
</html>
